<template>
  <view class="goods">
    <u-grid v-if="tableData.length>0" col="2" custom-style="height: calc(100vh);background: #e7e7e7;" @click="click">
      <u-grid-item v-for="(item,index) in tableData" :key="index" :custom-style="{height:520+'rpx',padding:10+'rpx'}">
        <view class="goods-item">
          <image mod="aspectFit" :src="item.imagePath" />
          <view class="title">
            <text>{{ item.name }}</text>
          </view>
          <view class="info">
            <view class="line-through">原价：<text>{{ item.salePrice }}元</text></view>
            <view>剩余：<text>{{ item.giftSurplusStock }}</text></view>
          </view>
          <view class="point">
            积分：<text>{{ item.points }}分</text>
            <view v-if="item.redeemMoney >0">金额{{ item.redeemMoney }}</view>
          </view>
        </view>
      </u-grid-item>
    </u-grid>

    <u-empty v-if="tableData.length===0" mode="data" margin-top="40%" text="商品列表为空" icon="http://cdn.uviewui.com/uview/empty/car.png" />
    <u-loadmore v-else :status="loadMoreStatus" color="#999" margin-top="40" height="20" line-color="#999" dashed />

    <u-popup :show="show" mode="bottom" @close="show = false">
      <view class="u-popup-slot">
        <view class="title">确认兑换</view>
        <view class="info">
          <image mod="aspectFit" :src="choose.goods.imagePath" />
          <view class="title">
            <view>{{ choose.goods.name }}</view>
            <view class="point">
              <view>积分：{{ choose.goods.points }}</view>
              <view>x{{ choose.num }}</view>
            </view>
          </view>
        </view>
        <view class="num">
          <view>选择数量</view>
          <u-number-box v-model="choose.num" integer bg-color="#fff" color="#000" :max="choose.goods.giftSurplusStock" :value="choose.num" @blur="changeNum" />
        </view>
        <view class="summary">
          总计{{ choose.num }}件商品，合计积分：<text>{{ totalPoints }}分</text>
        </view>
        <u-button text="兑换" custom-style="background: #ff3939;color: #fff;" @click="exchange" />
      </view>
    </u-popup>
  </view>
</template>

<script>
import { pointsProductPage, pointsProductRedeem } from '@/api/api1'
const util = require('@/utils/util')
export default {
  components: {},
  data() {
    return {
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      totalPage: 0, // 总页数
      tableData: [], // 表单数据
      loadMoreStatus: 'loadmore',
      loading: false,
      searchTableQuery: {
        status: 'Y',
        size: 10,
        current: 1
      },

      choose: {
        goods: {},
        num: 1
      },
      show: false // 隐藏兑换
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    totalPoints() {
      if (this.choose.goods.points) {
        return util.accMul(this.choose.goods.points, this.choose.num)
      }
      return 0
    }

  },

  onLoad() {
    this.getSection()
  },
  onReachBottom() {
    this.loadMore()
  },

  methods: {
    getSection() {
      // 初始化tab

      // 加载数据
      this.getSearchList()
    },
    changeNum(e) {
      if (e.value > this.choose.goods.giftSurplusStock) {
        this.choose.num = this.choose.goods.giftSurplusStock
      }
    },
    // 兑换
    exchange() {
      const that = this

      const cardNo = that.userInfo.cardNo
      const phone = that.userInfo.phone
      const storeNo = '201'

      pointsProductRedeem({
        id: that.choose.goods.id,
        redeemMoney: that.choose.goods.redeemMoney,
        points: that.choose.goods.points,
        amount: that.choose.num,
        mobile: phone,
        cardNo: cardNo,
        storeNo: storeNo
      }).then(res => {
        uni.$u.toast('兑换成功')
        that.show = false

        that.searchTableQuery.current = 1
        that.tableData = []
        that.getSearchList()
      })
    },
    // 选中兑换
    click(index) {
      if (this.tableData[index].giftSurplusStock === 0) {
        return uni.$u.toast('暂无库存')
      }
      this.show = true
      this.choose = {
        goods: this.tableData[index],
        num: 1
      }
    },
    loadMore() {
      if (this.searchTableQuery.current < this.totalPage) {
        this.searchTableQuery.current = this.searchTableQuery.current + 1
        this.getSearchList()
      } else {
        this.loadMoreStatus = 'nomore'
      }
    },
    getSearchList() {
      const that = this
      that.loadMoreStatus = 'loading'
      that.loading = true
      pointsProductPage(that.searchTableQuery).then(res => {
        that.loading = false
        that.loadMoreStatus = 'loadmore'
        that.handle('积分商品', res)
      })
    },

    handle(desc, res) {
      this.totalPage = res.data.pages
      console.info(desc + '列表数据：', res.data.records)

      const resList = res.data.records.map(data => {
        data.giftSurplusStock = Number(data.giftSurplusStock)
        return data
      })
      this.tableData = this.tableData.concat(resList)
      if (res.data.current === res.data.pages) {
        this.loadMoreStatus = 'nomore'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.u-popup-slot {
  width: 100%;
  @include flex-space-between(column);
  align-items: stretch;
  .title {
    height: 64rpx;

    @include flex-center;
    font-size: 28rpx;
  }
  .info {
    height: 240rpx;

    background: #f7f7f7;
    padding: 0 20rpx 0 20rpx;
    @include flex-space-between;
    image {
      width: 200rpx;
      height: 200rpx;
      background-color: #fff;
    }
    .title {
      width: 66%;
      height: 80%;
      font-size: 28rpx;
      //竖向排列
      @include flex-space-between(column);
      align-items: stretch;
      .point {
        color: #c02828;
        //横向排列
        @include flex-space-between;
      }
    }
  }
  .num {
    @include flex-space-between;
    height: 62rpx;
    padding: 0 20rpx;
  }
  .summary {
    height: 80rpx;
    padding: 0 20rpx;

    @include flex-right;
    justify-content: flex-end;
    font-size: 26rpx;
    text {
      color: #e42828;
    }
  }
}

.goods-item {
  @include flex-space-between(column);
  align-items: stretch;
  background: $custom-bg-color;
  height: 100%;
  width: 100%;
  margin: 0 20rpx;
  font-size: 24rpx;
  color: $uni-text-color;
  image {
    height: 330rpx;
  }
  .title {
    padding: 10rpx 20rpx;
    letter-spacing: 2rpx;
    text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
  .info {
    padding: 0 20rpx;
    color: $uni-text-color-grey;
    font-size: 20rpx;
    @include flex-space-between;
    .line-through {
      text-decoration: line-through;
    }
  }
  .point {
    padding: 10rpx 20rpx 20rpx 20rpx;
    letter-spacing: 2rpx;
    text {
      color: #f86969;
    }
  }
}
</style>
